import type { ProColumns, ProFormInstance } from '@ant-design/pro-components';
import { EditableProTable, ProForm } from '@ant-design/pro-components';
import { useState } from 'react';

export interface Props {
  formRef: React.MutableRefObject<ProFormInstance<any> | undefined>;
  formData: GoodsListManagementApi.FormData;
  setFormData: React.Dispatch<React.SetStateAction<GoodsListManagementApi.FormData>>;
}

function GoodsListManagementInventoryForm(props: Props) {
  const { formData, setFormData } = props;
  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>(() => [].map((item) => item));

  const columns: ProColumns<GoodsListManagementApi.SkuInfo>[] = [
    {
      title: '规格名称',
      dataIndex: 'skuName',
    },
    // {
    //   title: '规格图',
    //   dataIndex: 'propertyIcon',
    //   renderFormItem(schema, config, form, action) {
    //     console.log(schema, config, form, action);

    //     return <ProFormUpload max={1} file={[]} onChangeFile={() => {}} />;
    //   },
    // },
    {
      title: '成本价',
      dataIndex: 'costPrice',
      valueType: 'digit',
    },
    {
      title: '划线价',
      dataIndex: 'exhibitionPrice',
      valueType: 'digit',
    },
    {
      title: '销售价',
      dataIndex: 'sellPrice',
      valueType: 'digit',
    },
    {
      title: '积分',
      dataIndex: 'integral',
      valueType: 'digit',
    },
    {
      title: '库存数量',
      dataIndex: 'inventoryQty',
      valueType: 'digit',
    },
    {
      title: '排序',
      dataIndex: 'sort',
      valueType: 'slider',
    },
    {
      title: '操作',
      valueType: 'option',
      render: (text, record, _, action) => [
        <a
          key="editable"
          onClick={() => {
            action?.startEditable?.(record.id);
          }}
        >
          编辑
        </a>,
        <a
          key="delete"
          onClick={() => {
            const skuInput = formData.skuInput;
            setFormData({
              ...formData,
              skuInput: skuInput.filter((item) => item.id !== record.id),
            });
          }}
        >
          删除
        </a>,
      ],
    },
  ];
  return (
    <ProForm.Item name="skuInput" trigger="onValuesChange">
      <EditableProTable<GoodsListManagementApi.SkuInfo>
        controlled
        rowKey="id"
        toolBarRender={false}
        columns={columns}
        recordCreatorProps={{
          newRecordType: 'dataSource',
          position: 'bottom',
          record: () => ({
            id: Date.now().toString(),
            skuName: '',
            sellPrice: 0,
            exhibitionPrice: 0,
            propertyIcon: '',
            integral: 0,
            inventoryQty: 0,
            sort: 0,
            costPrice: 0,
          }),
        }}
        editable={{
          type: 'multiple',
          editableKeys,
          onChange: setEditableRowKeys,
          actionRender: (row, _, dom) => {
            return [dom.save, dom.delete];
          },
        }}
        value={formData.skuInput}
        onChange={(skuInput) => {
          setFormData({ ...formData, skuInput: [...skuInput] });
        }}
      />
    </ProForm.Item>
  );
}
export default GoodsListManagementInventoryForm;
